<template>
	<view class="recharge" :style="'height:'+viewHeight+'px;'">
		<view class="head">
			<view class="balance">
				<view class="balance-title">
					当前余额（元）
				</view>
				<view class="balance-price">
					0.00
				</view>
			</view>
			<view class="record">
				<view class="btn">
					充值记录
				</view>
			</view>
		</view>
		<addrecharge></addrecharge>
	</view>
</template>

<script>
	import addrecharge from './addrecharge.vue'
	export default {
		components:{
			addrecharge
		},
		data() {
			return {
				//可视高度
				viewHeight: 0
			}
		},
		onReady() {
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.viewHeight = res.windowHeight
				}
			})
		},
		methods: {}
	};
</script>

<style lang="scss" scoped>
	.recharge {
		background-color: #f6f6f6;
	}

	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx;
		height: 20vh;
		color: #fff;
		background: linear-gradient(180deg, #fd630d, #ffa424);

		.balance {
			&-title {
				font-size: 34rpx;
			}

			&-price {
				margin-top: 20rpx;
				font-size: 80rpx;
			}
		}
	}

	.btn {
		padding: 14rpx 30rpx;
		border: #dedede solid 2px;
		border-radius: 30rpx;
	}
</style>